<template>
  <div class="cus-search" :style="[boxStyle]">
    <div class="cus-search-title" v-if="showTitle">
      {{title}}
      <slot name="header-left"></slot>
    </div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "cus-search",
    props: {
      padding: {
        type: String, Number,
        default: '20px 20px 0px 20px'
      },
      showTitle: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '伙食保障列表'
      },
    },
    computed: {
      boxStyle(){
        let style = {};
        style.padding = this.padding;
        return style;
      }
    }
  }
</script>

<style scoped lang="less">
  .cus-search {
    width: 100%;
    background: #FFFFFF;
    border-radius: 6px;
    border: 0 solid #B9B9B9;
    box-shadow: 0px 4px 8px 0px rgba(108,137,165,0.18);
    &-title{
      height: 28px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
    }
  }
</style>
